<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item> -->
                <el-breadcrumb-item><i class="el-icon-lx-file"></i> 我上传的文件</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table
                :data="showFiles.filter((data) => !search || data.filesName.toLowerCase().includes(search.toLowerCase()))"
                :default-sort="{ prop: 'teamId', order: ' ascending' }"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="文件名" sortable prop="filesName"> </el-table-column>
                <el-table-column label="所属小组" prop="team.teamName"></el-table-column>
                <el-table-column label="项目" prop="project.projectName"></el-table-column>
                <el-table-column label="文件类型" prop="type"> </el-table-column>
                <el-table-column label="文件大小" sortable prop="size"></el-table-column>
                <el-table-column label="下载次数" sortable prop="downcounts"> </el-table-column>
                <el-table-column label="上传时间" sortable prop="uploadTime"> </el-table-column>
                <el-table-column align="center">
                    <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入文件名搜索" />
                    </template>
                    <template slot-scope="scope" align="center">
                        <!-- <el-button type="text" @click="online(scope.$index, scope.row)">在线查看</el-button> -->
                        <el-button type="text" @click="downLoad(scope.$index, scope.row)">下载</el-button>
                        <el-button type="text" class="red" @click="removeFiles(scope.$index, scope.row)">删除</el-button>
                        <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination small layout="prev, pager, next" :total="pageTotal" :page-size="pagesize" @current-change="handlePageChange">
                </el-pagination>
            </div>

            <div class="uploadBox">
                <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://localhost:9900/files/addFiles"
                    :on-change="changFiles"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :auto-upload="false"
                    :http-request="uploadFile"
                >
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
export default {
    name: 'upload',
    data: function () {
        return {
            hasTeam: localStorage.getItem('hasTeam'),
            cropImg: localStorage.getItem('imageURL'),
            defaultSrc: localStorage.getItem('imageURL'),
            dialogVisible: false,
            fileDate: '',
            fileList: [],
            allFiles: [],
            imgSrc: '',
            number: localStorage.getItem('ms_number'),
            pageTotal: 50,
            pagesize: 5,
            pageIndex: 1,
            showFiles: [],
            search: '',
            filessss: '',
            hasProject: localStorage.getItem('hasProject')
        };
    },
    created() {
        this.findAll();
        console.log(this.hasTeam);
        console.log(this.hasProject);
    },
    components: {
        VueCropper
    },
    methods: {
        findAll() {
            this.$http.get('http://localhost:9900/files/findFiles?number=' + this.number).then((res) => {
                this.allFiles = res.data;
                this.pageTotal = this.allFiles.length;
                this.currentChangePage(this.allFiles, 1);
                console.log(this.allFiles);
            });
        },
        // 分页导航
        handlePageChange(currentPage) {
            console.log('currentPage' + currentPage);
            this.pageIndex = currentPage;
            this.currentChangePage(this.allFiles, currentPage);
        },
        //分页显示
        currentChangePage(list, currenPage) {
            let from = (currenPage - 1) * this.pagesize; //0
            let to = currenPage * this.pagesize; //5
            this.showFiles = []; //[]
            for (; from < to; from++) {
                if (list[from]) {
                    this.showFiles.push(list[from]);
                }
            }
        },
        // 上传方法
        //上传文件
        uploadFile(file) {
            console.log(file);
            this.fileDate.append('files', file.file);
        },

        //上传到服务器
        submitUpload() {
            console.log(this.hasTeam)
            console.log(this.hasProject)
            if (this.hasTeam== null || !this.hasProject) {
                this.$message.error('您还未加入任何小组或未选择课题！');
            } else {
                if (this.fileList.length == 0) {
                    this.$message.error('请选择文件');
                } else {
                    this.fileDate = new FormData();
                    this.$refs.upload.submit();
                    this.$http
                        .post('http://localhost:9900/files/addFiles', this.fileDate, { headers: { token: this.number } })
                        .then((res) => {
                            console.log(res.data);
                            if (res.data != 'ok') {
                                this.$message.error(res.data);
                            } else {
                                this.$message.success('上传成功！');
                                this.fileList = [];
                                this.findAll();
                                location.reload();
                            }
                        });
                }
            }
        },
        //文件改变
        changFiles(file, fileList) {
            var i = fileList.length - 2;
            for (i; i >= 0; i--) {
                console.log(file.name);
                console.log(fileList[i].name);
                if (file.name == fileList[i].name) {
                    this.$message.error('请勿选择相同的文件');
                    fileList.splice(i, 1);
                }
            }
            this.fileList = fileList;
            console.log(this.fileList);
        },
        // submitUpload() {
        //     //this.$refs.upload.submit();
        //     this.$http.post('http://localhost:9900/files/addFiles', this.filessss);
        // },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        downLoad(index, row) {
            let a = document.createElement('a');
            a.href = 'http://localhost:9900/files/downloadFiles?id=' + row.filesId;
            a.click();
            this.$message.success('正在下载！');
        },
        removeFiles(index, row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.$http.get('http://localhost:9900/files/removeFiles?id=' + row.filesId).then((res) => {
                    console.log(res.data);
                    if (res.data == 'success') {
                        this.$message.success('删除成功');
                        this.showFiles.splice(index, 1);
                        this.reload();
                    } else {
                        this.$message.error();
                        ('系统出错，请稍后再试');
                    }
                });
            });
        }
    }
};
</script>

<style scoped>
.uploadBox {
    margin-top: 30px;
    border: 1px #d9d9d9;
    width: 500px;
    height: 200px;
}
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.red {
    color: rgb(221, 29, 29);
}
</style>